<template>
  <div class="SyMain">
    <div style="display: flex;justify-content:center;height: 800px;position: relative;">
      <div class="SyMainLeft">
        <div class="ceng1"></div>
        <div class="SyHjTitle"></div>
        <div class="SyHjText">户籍人口分析</div>
      <div class="SyHjRk">
        <div class="SyHjZrk"></div>
        <div class="SyHjZrkText">户籍人口</div>
        <div class="SyHjZrkData" id="SyHjZrkData"></div>
      </div>
      <div class="SyHyZk">
        <div class="SyHyZkTitle">婚姻状况</div>
        <div id="hjrk_e"></div>
      </div>
      <div class="SyHyNl">
        <div class="SyHyNlTitle">户籍人口年龄构成</div>
        <div id="age_composition"></div>
      </div>
      <div class="SyXlGc">
        <div class="SyXlGcTitle">户籍人口学历构成</div>
        <div id="xueli_fenxi" style="width: 100%;height: 100%;"></div>
      </div>
      </div>
      <div style="width: 100%;height: 800px;">
          <div id="container"></div>
      </div>
      <div style="width: 25%;height: 100%;position: absolute;right: 0;">
        <div class="SyLdRk">
          <div class="ceng2"></div>
          <div class="SyLdTitle"></div>
          <div class="SyLdText">流动人口分析</div>
          <div class="SyLdRkFx">
            <div class="SyLdZrk"></div>
            <div class="SyLdZrkText">流动人口</div>
            <div class="SyLdZrkData" id="SyLdZrkData"></div>
          </div>
        <div class="SyLdYy">
          <div class="SyLdYyTitle">流动原因</div>
          <div id="hjrk2_e" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="SyLdNl">
          <div class="SyLdNlTitle">流动人口年龄构成</div>
          <div id="age_composition2" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="SyLdXl" style="width: 100%;height: 33%;">
          <div class="SyLdXlTitle">流动人口学历构成</div>
          <div id="xueli2_fenxi" style="width: 100%;height: 100%;"></div>
        </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 300px;margin-top: 10px;">
      <div class="SyMainRightBottom">
        <div class="ceng3"></div>
      <div class="SyMainRightBottomLeft">
      <div class="SyMainRightBottomLeftTitle"></div>
      <div class="SyMainRightBottomLeftText">境外人员分析</div>
      <div id="jingwai_fenxi" style="width: 100%;height: 100%;"></div>
      </div>
      <div class="SyMainRightBottomRight">
      <div class="SyMainRightBottomRightTitle"></div>
      <div class="SyMainRightBottomRightText">出租房分析</div>
      <div id="chuzu_fenxi" style="width: 100%;height: 100%;"></div>
      </div>
      </div>
    </div>
    <div style="width: 100%;height: 350px;">
      <div class="SyMainBottom">
      <div class="ceng1"></div>
      <div class="SyMainBottomTitle"></div>
      <div class="SyMainBottomText">留守人口</div>
      <div id="liu_shou" style="width: 100%;height: 100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  maritalStatus,
  censusRegisterAge,
  educationConstitute,
  reasonsOfFlow,
  floatingPopulation,
  overseasPeople,
  rentalAnalysis,
  floatingPopulationEducation
} from '@/http/AppApi'

export default {
  name: 'app',
  data () {
    return {
      AMapUI: null,
      AMap: null,
      map: null,
      url: '',
      colors: [
        '#1e2189', '#1426a1', '#0f2a8c', '#182ea0', '#1c208b', '#193498', '#1f2b9d', '#0f2da1',
        '#1a1d9a', '#1b2d90', '#142aa0', '#18287e', '#0d2085', '#11269a', '#152681', '#182a8c',
        '#192a87', '#1c309d', '#0f26a4', '#091d89'
      ]
    }
  },
  mounted () {
    this.init()
    this.hjrk_e()
    this.age_composition()
    this.hjrk2_e()
    this.age_composition2()
    this.xueli_fenxi()
    this.jingwai_fenxi()
    this.chuzu_fenxi()
    this.liu_shou()
    this.xueli2_fenxi()
  },
  methods: {
    init () {
      this.AMapUI = window.AMapUI
      this.AMap = window.AMap
      this.loadDistrictExplorer()
    },
    loadDistrictExplorer () {
      let m = this
      var opts = {
        subdistrict: 1,
        extensions: 'all',
        level: 'district'
      }
      var district = new AMap.DistrictSearch(opts)
      district.search('平桥区', function (status, result) {
        var bounds = result.districtList[0].boundaries
        var mask = []
        let polygons = []
        for (let i = 0; i < bounds.length; i += 1) {
          var polygon = new AMap.Polygon({
            strokeWeight: 1,
            path: bounds[i],
            fillOpacity: 0.4,
            fillColor: '#1426a1',
            strokeColor: '#0091ea'
          })
          polygons.push(polygon)
          mask.push([bounds[i]])
        }
        m.map = new AMap.Map('container', {
          mask: mask,
          center: [114.091104, 32.148489],
          viewMode: '3D',
          labelzIndex: 9999,
          pitch: 40,
          zoom: 10
        })
        m.map.setMapStyle('amap://styles/8d5705fe9baf14eec73c1a9d60bfbaad')
        m.map.add(polygons)
        let maskerIn = new AMap.Marker({
          position: [114.091104, 32.148489]
        })
        m.map.add(maskerIn)
        // 添加高度面
        var object3Dlayer = new AMap.Object3DLayer({zIndex: 1})
        m.map.add(object3Dlayer)
        var height = -8000
        var color = '#ccc'
        var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
        })
        wall.transparent = true
        object3Dlayer.add(wall)
      })
    },
    hjrk_e () {
      let hjrkEcharts = this.$echarts.init(document.getElementById('hjrk_e'))
      maritalStatus().then(resp => {
        if (resp.code && resp.code === '200') {
          let maritalStatusData = JSON.parse(resp.data)
          document.getElementById('SyHjZrkData').innerHTML = maritalStatusData[5].price + '人'
          hjrkEcharts.setOption({
            legend: {
              orient: 'vertical',
              x: 'right',
              y: '23%',
              data: ['已婚', '未婚', '离婚', '丧偶', '其他'],
              textStyle: {
                color: 'white'
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
              {
                name: '婚姻状况',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                  {value: maritalStatusData[0].price, name: '未婚'},
                  {value: maritalStatusData[1].price, name: '已婚'},
                  {value: maritalStatusData[2].price, name: '丧偶'},
                  {value: maritalStatusData[3].price, name: '离婚'},
                  {value: maritalStatusData[4].price, name: '其他'}
                ].sort(function (a, b) {
                  return a.value - b.value
                }),
                roseType: 'radius',
                color: ['#178df4', '#17ecf4', '#1871be', '#d4b126', '#554eaa']
              }
            ]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    },
    age_composition () {
      let ageEcharts = this.$echarts.init(document.getElementById('age_composition'))
      censusRegisterAge().then(resp => {
        if (resp.code && resp.code === '200') {
          let ageOfRegisteredPopulation = JSON.parse(resp.data)
          ageEcharts.setOption({
            color: ['#3398DB'],
            legend: {
              y: 10,
              data: ['男', '女'],
              textStyle: {
                color: 'white'
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['18岁以下', '19-35', '36-45', '46-55', '56-65', '65以上'],
                // axisTick: {
                //   alignWithLabel: true
                // },
                axisLabel: {
                  // show: true,
                  interval: 0,
                  // rotate: 30,
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '数量',
                axisLine: {
                  lineStyle: {
                    color: 'white'
                  }
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            ],
            series: [
              {
                name: '男',
                type: 'bar',
                stack: '性别',
                barWidth: '60%',
                data: [
                  ageOfRegisteredPopulation[0][0].price,
                  ageOfRegisteredPopulation[0][1].price,
                  ageOfRegisteredPopulation[0][2].price,
                  ageOfRegisteredPopulation[0][3].price,
                  ageOfRegisteredPopulation[0][4].price,
                  ageOfRegisteredPopulation[0][5].price
                ],
                color: '#039ee6'
              },
              {
                name: '女',
                type: 'bar',
                stack: '性别',
                barWidth: '60%',
                data: [
                  ageOfRegisteredPopulation[1][0].price,
                  ageOfRegisteredPopulation[1][1].price,
                  ageOfRegisteredPopulation[1][2].price,
                  ageOfRegisteredPopulation[1][3].price,
                  ageOfRegisteredPopulation[1][4].price,
                  ageOfRegisteredPopulation[1][5].price
                ],
                color: '#7006d9'
              }
            ]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    },
    hjrk2_e () {
      let hjrk2Echarts = this.$echarts.init(document.getElementById('hjrk2_e'))
      reasonsOfFlow().then(resp => {
        if (resp.code && resp.code === '200') {
          document.getElementById('SyLdZrkData').innerHTML = resp.data[10].price + '人'
          hjrk2Echarts.setOption({
            backgroundColor: '',
            tooltip: {},
            grid: {
              top: '15%',
              right: '2%',
              bottom: '10%',
              left: '2%',
              containLabel: true
            },
            legend: {
              data: [''],
              right: '10%',
              // y: 10,
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            },
            xAxis: {
              data: ['务工', '务农', '经商', '学习培训', '婚嫁', '随迁', '治病疗养', '投靠亲友', '工作调动', '其他'],
              axisTick: {
                show: true
              },
              axisLabel: {
                interval: 0,
                rotate: 40,
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                }
              },
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#fff',
                  width: '1'
                }
              }
            },
            yAxis: {
              type: 'value',
              name: '数量',
              axisLabel: {
                show: true,
                textStyle: {
                  color: 'white'
                }
              },
              nameTextStyle: {
                color: 'white'
              }
            },
            series: [{
              name: '流动原因及数量',
              type: 'bar',
              barWidth: 20,
              data: [resp.data[0].price, resp.data[1].price, resp.data[2].price, resp.data[3].price, resp.data[4].price, resp.data[5].price, resp.data[6].price, resp.data[7].price, resp.data[8].price, resp.data[9].price],
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#468cff'},
                      // {offset: 0.5, color: '#44C0C1'},
                      {offset: 1, color: '#91e3f7'}
                    ]
                  )
                },
                emphasis: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#91e3f7'},
                      // {offset: 0.7, color: '#44C0C1'},
                      {offset: 1, color: '#468cff'}
                    ]
                  )
                }
              }
            }]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    },
    age_composition2 () {
      let age2Echarts = this.$echarts.init(document.getElementById('age_composition2'))
      floatingPopulation().then(resp => {
        if (resp.code && resp.code === '200') {
          age2Echarts.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              x: 'center',
              y: 15,
              data: ['男', '女'],
              textStyle: {
                color: 'white'
              }
            },
            grid: {
              left: '2%',
              right: '2%',
              bottom: '15%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['18岁以下', '19-35', '36-45', '46-55', '56-65', '65以上'],
                axisLabel: {
                  interval: 0,
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '数量',
                axisLine: {
                  lineStyle: {
                    color: 'white'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            ],
            series: [
              {
                name: '女',
                type: 'bar',
                barWidth: '20',
                stack: '性别',
                data: [resp.data[1][0].price, resp.data[1][1].price, resp.data[1][2].price, resp.data[1][3].price, resp.data[1][4].price, resp.data[1][5].price],
                color: '#fec103'
              },
              {
                name: '男',
                type: 'bar',
                stack: '性别',
                data: [resp.data[0][0].price, resp.data[0][1].price, resp.data[0][2].price, resp.data[0][3].price, resp.data[0][4].price, resp.data[0][5].price],
                color: '#58a1fd'
              }
            ]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    },
    xueli_fenxi () {
      let xueliEcharts = this.$echarts.init(document.getElementById('xueli_fenxi'))
      educationConstitute().then(resp => {
        if (resp.code && resp.code === '200') {
          let RegisteredEducation = JSON.parse(resp.data)
          xueliEcharts.setOption({
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              x: '75%',
              y: '17%',
              data: ['小学', '中学', '大专', '本科', '硕士', '其他'],
              textStyle: {
                color: 'white'
              }
            },
            series: [
              {
                name: '户籍人口学历',
                type: 'pie',
                radius: ['40%', '55%'],
                center: ['40%', '45%'],
                label: {},
                data: [
                  {value: RegisteredEducation[0].price, name: '小学'},
                  {value: RegisteredEducation[1].price, name: '中学'},
                  {value: RegisteredEducation[2].price, name: '大专'},
                  {value: RegisteredEducation[3].price, name: '本科'},
                  {value: RegisteredEducation[4].price, name: '硕士'},
                  {value: RegisteredEducation[5].price, name: '其他'}
                ],
                itemStyle: {
                  normal: {
                    color: function (params) {
                      var colorList = [
                        '#57aca7', '#0075a9', '#febe03', '#00f6ff', '#fb5969', '#387cfa', '#a859ff'
                      ]
                      return colorList[params.dataIndex]
                    }
                  }
                }
              }
            ]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    },
    jingwai_fenxi () {
      let jingwaiEcharts = this.$echarts.init(document.getElementById('jingwai_fenxi'))
      overseasPeople().then(resp => {
        if (resp.code && resp.code === '200') {
          jingwaiEcharts.setOption({
            color: ['#3398DB'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '5%',
              right: '5%',
              top: '15%',
              bottom: '23%'
              // containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: ['商务', '就业', '学习', '定居', '探亲', '其他'],
                axisTick: {
                  alignWithLabel: true
                },
                axisLabel: {
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '人数',
                axisLine: {
                  lineStyle: {
                    color: 'white'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            ],
            series: [
              {
                name: '目的',
                type: 'bar',
                barWidth: '30',
                data: [resp.data[0].price, resp.data[1].price, resp.data[2].price, resp.data[3].price, resp.data[4].price, resp.data[5].price],
                itemStyle: {
                  normal: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {offset: 0, color: '#5ad9e8'},
                        // {offset: 0.5, color: '#44C0C1'},
                        {offset: 1, color: '#3c80fe'}
                      ]
                    )
                  },
                  emphasis: {
                    color: new this.$echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {offset: 0, color: '#3c80fe'},
                        // {offset: 0.7, color: '#44C0C1'},
                        {offset: 1, color: '#5ad9e8'}
                      ]
                    )
                  }
                }
              }
            ]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    },
    chuzu_fenxi () {
      let chuzuEcharts = this.$echarts.init(document.getElementById('chuzu_fenxi'))
      rentalAnalysis().then(resp => {
        if (resp.code && resp.code === '200') {
          chuzuEcharts.setOption({
            tooltip: {},
            grid: {
              left: '8%',
              right: '2%',
              top: '15%',
              bottom: '23%'
            },
            legend: {
              itemGap: 50,
              data: ['注册总量', '最新注册量'],
              textStyle: {
                color: '#f9f9f9',
                borderColor: '#fff'
              }
            },
            xAxis: [{
              type: 'category',
              boundaryGap: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#f9f9f9'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#d1e6eb',
                  margin: 15
                }
              },
              axisTick: {
                show: false
              },
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }],
            yAxis: [{
              type: 'value',
              name: '数量',
              axisLine: {
                show: false,
                lineStyle: {
                  color: 'white'
                }
              },
              min: 0,
              // max: 140,
              splitNumber: 7,
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#0a3256'
                }
              },
              // axisLine: {
              //
              // },
              axisLabel: {
                margin: 20,
                textStyle: {
                  color: '#d1e6eb'

                }
              },
              axisTick: {
                show: false
              }
            }],
            series: [{
              name: '',
              type: 'line',
              showAllSymbol: true,
              symbol: 'emptyCircle',
              symbolSize: 6,
              lineStyle: {
                normal: {
                  color: '#28ffb3'
                },
                borderColor: '#f0f'
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff'
                }
              },
              itemStyle: {
                normal: {
                  color: '#dcfff9'

                }
              },
              tooltip: {
                show: false
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,154,120,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,0,0, 0)'
                  }
                  ], false),
                  shadowColor: 'rgba(53,142,215, 0.9)',
                  shadowBlur: 20
                }
              },
              data: [
                resp.data[0].price,
                resp.data[1].price,
                resp.data[2].price,
                resp.data[3].price,
                resp.data[4].price,
                resp.data[5].price,
                resp.data[6].price,
                resp.data[7].price,
                resp.data[8].price,
                resp.data[9].price,
                resp.data[10].price,
                resp.data[11].price
              ]
            }]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    },
    liu_shou () {
      let liushouEcharts = this.$echarts.init(document.getElementById('liu_shou'))
      liushouEcharts.setOption({
        tooltip: {
          trigger: 'axis'
          // axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          //     type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          // }
        },
        legend: {
          y: 10,
          data: ['18岁以下', '19-35', '36-45', '46-55', '56-65', '65以上'],
          textStyle: {
            color: 'white'
          }
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['明港镇', '邢集镇', '平昌关镇', '五里镇', '洋河镇', '肖王镇', '龙井乡', '肖店乡', '胡店乡', '彭家湾乡', '长台关乡', '查山乡', '王岗乡', '高粱店乡'],
            axisLabel: {
              interval: 0,
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            }
          }
        ],
        series: [
          {
            name: '18岁以下',
            type: 'bar',
            barWidth: '35',
            stack: '广告',
            data: [52, 100, 4, 56, 5, 58, 53, 39, 94, 61, 76, 77, 12, 16],
            color: '#387cfa'
          },
          {
            name: '19-35',
            type: 'bar',
            stack: '广告',
            data: [22, 58, 2, 32, 20, 65, 59, 42, 15, 33, 67, 63, 99, 79],
            color: '#00cca3'
          },
          {
            name: '36-45',
            type: 'bar',
            stack: '广告',
            data: [16, 7, 95, 25, 67, 61, 24, 92, 11, 4, 9, 21, 76, 45],
            color: '#57aca7'
          },
          {
            name: '46-55',
            type: 'bar',
            stack: '广告',
            data: [98, 43, 91, 38, 97, 36, 25, 79, 80, 57, 74, 69, 44, 3],
            color: '#0075a9'
          },
          {
            name: '46-55',
            type: 'bar',
            stack: '广告',
            data: [93, 89, 63, 80, 60, 96, 33, 82, 84, 99, 39, 90, 16, 42],
            color: '#febe03'
          },
          {
            name: '56-65',
            type: 'bar',
            stack: '广告',
            data: [81, 82, 0, 4, 32, 76, 63, 52, 73, 68, 88, 1, 74, 15],
            color: '#00f6ff'
          },
          {
            name: '65以上',
            type: 'bar',
            stack: '广告',
            data: [57, 64, 74, 100, 8, 95, 18, 34, 51, 43, 70, 17, 88, 62],
            color: '#fb5969'
          }
        ]
      })
    },
    xueli2_fenxi () {
      let xueli2Echarts = this.$echarts.init(document.getElementById('xueli2_fenxi'))
      floatingPopulationEducation().then(resp => {
        if (resp.code && resp.code === '200') {
          xueli2Echarts.setOption({
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              x: '75%',
              y: '17%',
              data: ['小学', '中学', '大专', '本科', '硕士', '其他'],
              textStyle: {
                color: 'white'
              }
            },
            series: [
              {
                name: '户籍人口学历',
                type: 'pie',
                radius: ['40%', '55%'],
                center: ['40%', '45%'],
                label: {},
                data: [
                  {value: resp.data[0].price, name: '小学'},
                  {value: resp.data[1].price, name: '中学'},
                  {value: resp.data[2].price, name: '大专'},
                  {value: resp.data[3].price, name: '本科'},
                  {value: resp.data[4].price, name: '硕士'},
                  {value: resp.data[5].price, name: '其他'}
                ],
                itemStyle: {
                  normal: {
                    color: function (params) {
                      var colorList = [
                        '#57aca7', '#0075a9', '#febe03', '#00f6ff', '#fb5969', '#387cfa', '#a859ff'
                      ]
                      return colorList[params.dataIndex]
                    }
                  }
                }
              }
            ]
          })
        } else {
          this.$message({
            type: 'info',
            message: resp.message
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  .SyMain{
    padding: 10px 16px;
  }
  #hjrk_e {
    width: 100%;
    height: 200px;
    margin-left: -10%;
    margin-top: -5%;
  }
  #hjrk2_e {
    width: 100%;
    height: 170px;
  }
  #age_composition {
    width: 100%;
    height: 200px;
  }
  #age_composition2 {
    width: 100%;
    height: 100%;
  }
  #container {
    width: 100%;
    height: 100%;
  }
  .SyMainLeft {
    width: 25%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
  }
  .SyHyZk {
    width: 100%;
    height: 26%;
  }
  .SyHyNl {
    width: 100%;
    height: 30%;
  }
  .SyXlGc {
    width: 100%;
    height: 33%;
    position: relative;
  }
  .SyLdYy {
    width: 100%;
    height: 26%;
  }
  .SyLdNl{
    width: 100%;
    height: 30%;
  }
  .SyLdRk {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
  }
  .SyMainRightBottom {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: relative;
  }
  .SyMainRightBottomLeft {
    width: 45%;
    height: 100%;
  }
  .SyMainRightBottomRight {
    width: 55%;
    height: 100%;
    position: relative;
  }
  .SyMainBottom {
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 10px
  }
  .ceng1, .ceng2, .ceng3 {
    width: 100%;
    height: 100%;
    position: absolute;
    /*background:rgb(01, 33, 66);*/
    background: #101977;
    opacity: 0.2;
    border: 1px solid #07a6ff;
    border-radius: 6px;
  }
  .SyHjTitle {
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_top_left_title_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .SyHjText {
    color: white;
    position: absolute;
    top: 9px;
    left: 6%;
  }
  .SyHjRk {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 4%;
  }
  .SyHjZrk {
    height: 30px;
    width: 145px;
    background-image: url('~@/assets/bigdata/img/y_hjrk.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .SyHjZrkText {
    font-size: 12px;
    color: white;
    position: absolute;
    top: 9.5%;
    left: 34.5%;
  }
  .SyHjZrkData {
    font-size: 12px;
    color: white;
    position: absolute;
    top: 8%;
    left: 49%;
    width: 70px;
    text-align: center;
  }
  .SyHyZkTitle, .SyHyNlTitle {
    color: white;
    text-align: center;
    font-size: 14px;
  }
  .SyXlGcTitle {
    color: white;
    text-align: center;
    font-size: 14px;
    /*position: absolute;*/
    /*top: 10%;*/
  }
  .SyLdTitle {
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_top_left_title_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .SyLdText {
    color: white;
    position: absolute;
    top: 9px;
    left: 6%;
  }
  .SyLdRkFx {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 4%;
  }
  .SyLdZrk {
    height: 30px;
    width: 145px;
    background-image: url('~@/assets/bigdata/img/y_hjrk2.png');
    background-repeat: no-repeat;
    background-size: 100%;
  }
  .SyLdZrkText {
    font-size: 12px;
    color: white;
    position: absolute;
    top: 11%;
    left: 35%;
  }
  .SyLdZrkData {
    font-size: 12px;
    color: white;
    position: absolute;
    top: 12%;
    left: 49%;
    width: 70px;
    text-align: center;
  }
  .SyLdYyTitle, .SyLdNlTitle, .SyLdXlTitle {
    color: white;
    text-align: center;
    font-size: 14px;
  }
  .SyMainRightBottomLeftTitle {
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_top_left_title_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .SyMainRightBottomLeftText {
    color: white;
    position: absolute;
    top: 9px;
    left: 4.5%;
  }
  .SyMainRightBottomRightTitle {
    width: 100%;
    height: 20px;
    background-image: url('~@/assets/bigdata/img/y_top_left_title_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
  }
  .SyMainRightBottomRightText {
    color: white;
    position: absolute;
    top: 9px;
    left: 14%;
  }
  .SyMainBottomTitle {
    width: 100%;
    height: 40px;
    background-image: url('~@/assets/bigdata/img/y_title2_bg.png');
    background-repeat: no-repeat;
    background-size: 99% 100%;
    /*margin-top: 10px;*/
    position: relative;
    top: 10px;
  }
  .SyMainBottomText {
    color: white;
    position: absolute;
    top: 9px;
    left: 15%;
  }
</style>
